<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓颉的挑战 - 汉字拼图游戏</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-pen-nib"></i> 仓颉的挑战</h1>
            <p class="subtitle">汉字拼图游戏</p>
        </header>

        <div class="game-container">
            <div class="game-info">
                <div class="info-box">
                    <h3><i class="fas fa-scroll"></i> 仓颉传说</h3>
                    <p id="legend-text">仓颉是黄帝的史官，传说他观察鸟兽足迹和自然万物，创造了最早的汉字。通过这个游戏，体验汉字的构造之美。</p>
                </div>
                
                <div class="stats">
                    <div class="stat">
                        <span class="stat-label">关卡:</span>
                        <span id="level" class="stat-value">1</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">分数:</span>
                        <span id="score" class="stat-value">0</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">时间:</span>
                        <span id="timer" class="stat-value">120</span>秒
                    </div>
                    <div class="stat">
                        <span class="stat-label">提示:</span>
                        <span id="hints" class="stat-value">3</span>
                    </div>
                </div>
            </div>

            <div class="game-area">
                <div class="target-section">
                    <h3>目标汉字: <span id="target-character">木</span></h3>
                    <p id="character-meaning">(含义：树木)</p>
                    <div class="target-grid" id="target-grid">
                        <!-- 目标汉字网格 -->
                    </div>
                </div>

                <div class="puzzle-section">
                    <h3>拼图区</h3>
                    <div class="puzzle-container">
                        <div class="puzzle-pieces" id="puzzle-pieces">
                            <!-- 拼图块将在这里动态生成 -->
                        </div>
                        <div class="puzzle-controls">
                            <button id="hint-btn" class="btn"><i class="fas fa-lightbulb"></i> 提示 (剩余: 3)</button>
                            <button id="shuffle-btn" class="btn"><i class="fas fa-random"></i> 打乱顺序</button>
                            <button id="reset-btn" class="btn"><i class="fas fa-redo"></i> 重置</button>
                            <button id="next-btn" class="btn"><i class="fas fa-forward"></i> 下一关</button>
                        </div>
                    </div>
                </div>

                <div class="message" id="message"></div>
            </div>
        </div>

        <div class="game-controls">
            <button id="start-btn" class="btn btn-primary"><i class="fas fa-play"></i> 开始游戏</button>
            <button id="pause-btn" class="btn"><i class="fas fa-pause"></i> 暂停</button>
            <button id="instructions-btn" class="btn"><i class="fas fa-info-circle"></i> 游戏说明</button>
            <select id="difficulty-select" class="difficulty-select">
                <option value="easy">简单</option>
                <option value="medium" selected>中等</option>
                <option value="hard">困难</option>
            </select>
        </div>

        <footer>
            <p>仓颉的挑战 - 汉字拼图游戏 | 计算机科学课程项目</p>
        </footer>
    </div>

    <!-- 游戏说明模态框 -->
    <div id="instructions-modal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h2><i class="fas fa-info-circle"></i> 游戏说明</h2>
            <div class="instructions">
                <h3>游戏目标</h3>
                <p>将右侧的汉字部件拖拽到左侧网格中，拼出目标汉字。</p>
                
                <h3>游戏规则</h3>
                <ul>
                    <li>每个汉字部件只能放置在一个网格单元格中</li>
                    <li>当汉字部件放置正确时，它会固定在网格中</li>
                    <li>当所有部件正确放置后，进入下一关</li>
                    <li>每关有时间限制，超时游戏结束</li>
                    <li>使用提示会减少你的最终得分</li>
                </ul>
                
                <h3>计分规则</h3>
                <ul>
                    <li>每正确放置一个部件: +10分</li>
                    <li>每完成一关: +50分</li>
                    <li>剩余时间每秒钟: +1分</li>
                    <li>使用一次提示: -20分</li>
                </ul>
                
                <h3>关于仓颉</h3>
                <p>仓颉是黄帝的史官，被尊称为"字圣"。传说他观察鸟兽足迹和自然万物的形状，创造了最早的汉字，开启了中华文明的文字记载历史。</p>
                
                <button id="start-from-instructions" class="btn btn-primary">开始游戏</button>
            </div>
        </div>
    </div>

    <!-- 游戏结束模态框 -->
    <div id="game-over-modal" class="modal">
        <div class="modal-content">
            <h2>游戏结束</h2>
            <div id="game-over-content">
                <!-- 游戏结束信息将动态插入 -->
            </div>
            <button id="restart-btn" class="btn btn-primary">重新开始</button>
        </div>
    </div>

    <script src="./characters.js"></script>

    <script src="./game.js"> </script>

    <script src="./script.js"></script>
</body>
</html>